<style lang="scss" scoped="">

  @import '../style.scss';

  .demo-Circle-custom{
    & h1{
      color: #3f414d;
      font-size: 28px;
      font-weight: normal;
    }
    & p{
      color: #657180;
      font-size: 14px;
      margin: 10px 0 15px;
    }
    & span{
      display: block;
      padding-top: 15px;
      color: #657180;
      font-size: 14px;
      &:before{
        content: '';
        display: block;
        width: 50px;
        height: 1px;
        margin: 0 auto;
        background: #e0e3e6;
        position: relative;
        top: -15px;
      };
    }
    & span i{
      font-style: normal;
      color: #3f414d;
    }
  }
</style>
<template>
  <div class='my_card_outer_b' style="height:44vh;">
    <div class='my_card_b' style="height:42vh;" >
      <div class="my_card_title_b">
        <Icon type="md-stats"  color='rgb(67,158,279)' class="my_card_icon"/>整体健康度分段占比
      </div>
      <div style="height:37vh;" ref="myEchart">


      </div>
    </div>

  </div>

</template>

<script>
  import echarts from 'echarts'
  import config from '../config.js'
  export default {
    name:'b_general_score_ratio',
    watch: {
      listen_general_data: function(val, oldVal) {
        this.initChart(val)
      }
    },
    computed: {
      listen_general_data() {
        return this.$store.state.general_data;
      }
    },
    mounted() {
      if (this.$store.state.general_data!=0){
        this.initChart(this.$store.state.general_data);
      }

    },
    methods:{
      initChart(input_data) {

        let hv = document.body.clientHeight / 100;
        var myChart = echarts.init(this.$refs.myEchart);

        var option = {
          legend: {
            left: 1 * hv,
            orient: 'vertical',
            textStyle: {
              color: '#000',
              fontSize:2 * hv,
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)",
            textStyle:{
              fontSize:100
            }
          },

          series: [{
            name: '各分数段占比',
            type: 'pie',
            radius: '80%',
            center: ['50%', '50%'],
            data: [{
              value: input_data.general_score_ratio[0],
              name: '0-40分',
              itemStyle:{
                color:config.colork['orange']
              }
            },
              {
                value: input_data.general_score_ratio[1],
                name: '40-60分',
                itemStyle:{
                  color:config.color[1]
                }
              },
              {
                value: input_data.general_score_ratio[2],
                name: '60-80分',
                itemStyle:{
                  color:config.colork['blue']
                }
              },
              {
                value: input_data.general_score_ratio[3],
                name: '80-90分',
                itemStyle:{
                  color:config.colork['grass']
                }
              },
              {
                value: input_data.general_score_ratio[4],
                name: '90-100分',
                itemStyle:{
                  color:config.color[0]
                }
              }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                fontSize:1*hv
              }
            },
            tooltip:{
              textStyle:{
                fontSize:1.5*hv
              }
            },
            label:{
              show:false,
              fontSize:1.5*hv,
              distance:1*hv,
              position:['50%', '50%']
            }
          }]
        };

        myChart.setOption(option, true);
      }
    }
  }



</script>

